<template>
  <view v-if="shenheStatus == 0" class="applyShop">
    <swiper class="swiper">
      <swiper-item
        v-for="(item, index) in configData.store_apply_banner"
        :key="index"
      >
        <image class="pic" :src="item"></image>
      </swiper-item>
    </swiper>
    <view class="formBox">
      <picker
        :range="user"
        range-key="name"
        @change="changeUser"
        :disabled="id > 0 ? true : false"
        mode="selector"
      >
        <view class="formItem">
          <text class="title">{{ $t("salesman.salesman") }}</text>
          <view class="chooseClass">
            <text>{{
              salemanName == "" ? $t("salesman.choose") : salemanName
            }}</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </picker>
      <view class="formItem">
        <text class="title">收款码id(可不填)</text>
        <input
          type="text"
          placeholder="请输入收款码id"
          v-model="form.qrcode_id"
        />
      </view>
      <view class="formItem">
        <text class="title">{{ $t("salesman.storeName") }}</text>
        <input
          type="text"
          :placeholder="$t('salesman.noName')"
          v-model="form.name"
        />
      </view>
      <picker
        :range="classify"
        range-key="name"
        @change="changeClass"
        mode="selector"
      >
        <view class="formItem">
          <text class="title">{{ $t("salesman.class") }}</text>
          <view class="chooseClass">
            <text>{{ catName == "" ? $t("salesman.noClass") : catName }}</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </picker>
      <view class="formItem">
        <text class="title">{{ $t("my.phone") }}</text>
        <input
          type="text"
          :placeholder="$t('salesman.noPhone')"
          v-model="form.mobile"
        />
      </view>
      <view class="formItem">
        <text class="title">{{ $t("shop.password") }}</text>
        <input
          type="text"
          :placeholder="$t('shop.noPassword')"
          v-model="form.password"
        />
      </view>
      <picker
        :range="types"
        range-key="name"
        @change="changeType"
        mode="selector"
      >
        <view class="formItem">
          <text class="title">主体类型</text>
          <view class="chooseClass">
            <text>{{ mainType == "" ? "选择主体类型" : mainType }}</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </picker>
      <view class="choosePic" style="border-bottom: 1px solid #f1f1f1">
        <view class="title">
          <text>{{ $t("mdAdmin.logo") }}</text>
          <text>（{{ $t("mdAdmin.necessary") }}）</text>
        </view>
        <view class="choose" v-if="form.logo == ''" @click="addPic('logo')">
          <text class="iconfont icon-camera"></text>
          <text>{{ $t("mdAdmin.upload") }}</text>
        </view>
        <view class="choose" v-else>
          <image :src="form.logo"></image>
          <text
            class="close iconfont icon-close"
            @click.stop="form.logo = ''"
          ></text>
        </view>
      </view>
    </view>
    <write v-if="mainType != ''" ref="write" :mainType="type"></write>
    <view class="foot">
      <text class="btn" @click="submit">申请店铺</text>
      <view class="tip">
        <radio
          :checked="read"
          color="#f0250e"
          @click="read = !read"
          style="transform: scale(0.7)"
        />
        <text>{{ $t("mdAdmin.read") }}</text>
        <text style="color: #f0250e" @click="gotoAgreement"
          >《{{ $t("salesman.agreement") }}》</text
        >
      </view>
    </view>
    <login-modal></login-modal>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import http from "@/common/http.js";
import write from "./components/write.vue";
export default {
  components: {
    write,
    Shenhe
  },
  data() {
    return {
      classify: [],
      types: [
        { name: "个体工商户", value: "SUBJECT_TYPE_INDIVIDUAL" },
        { name: "企业", value: "SUBJECT_TYPE_ENTERPRISE" },
        { name: "党政、机关及事业单位", value: "SUBJECT_TYPE_INSTITUTIONS" },
        { name: "其他组织", value: "SUBJECT_TYPE_OTHERS" }
      ],
      // 主体类型
      mainType: "",
      // 主体类型值
      type: "",
      form: {
        salesman_id: 0,
        name: "",
        cat_id: "",
        mobile: "",
        password: "",
        logo: "",
        qrcode_id: ""
      },
      // 是否阅读协议
      read: true,
      // 类名名称
      catName: "",
      // 上次业务员的id
      id: 0,
      // 业务员列表
      user: [],
      // 业务员名称
      salemanName: "",
      // 配置消息
      configData: {
        store_apply_banner: [],
        store_apply_agreement: ""
      }
    };
  },
  onLoad(options) {
    if (options.scene) {
      let scene = decodeURIComponent(options.scene);
      let params = this.$utils.oneValues(scene);
      if (params.salesman_id) {
        this.id = params.salesman_id;
      }
    }
    if (options.salesman_id) {
      this.id = options.salesman_id;
    }
    this.getClass();
    this.getUserList();
    this.getConfig();
  },
  methods: {
    // 获取商城类目
    async getClass() {
      const res = await this.$allrequest.merchant.classList();
      if (res.code == 0) {
        this.classify = res.data;
      }
    },
    // 切换类目
    changeClass(e) {
      let index = e.detail.value;
      this.form.cat_id = this.classify[index].id;
      this.catName = this.classify[index].name;
    },
    // 切换业务员
    changeUser(e) {
      let index = e.detail.value;
      this.form.salesman_id = this.user[index].id;
      this.salemanName = this.user[index].name;
    },
    // 切换主体类型
    changeType(e) {
      let index = e.detail.value;
      this.type = this.types[index].value;
      this.mainType = this.types[index].name;
    },
    // 上传图片
    addPic(e) {
      this.$utils.uploadImage(1, (res) => {
        this.form[e] = res;
      });
    },

    // 获取业务员类表
    async getUserList() {
      const res = await this.$allrequest.merchant.userList();
      if (res.code == 0) {
        this.user = res.data;
        if (this.id > 0) {
          let index = this.user.findIndex((item) => {
            return item.id == this.id;
          });
          this.form.salesman_id = this.user[index].id;
          this.salemanName = this.user[index].name;
        }
      }
    },
    // 提交
    async submit() {
      if (this.form.salesman_id == 0) {
        uni.showToast({
          title: this.$t("salesman.choose"),
          icon: "none"
        });
        return;
      }
      if (this.form.name == "") {
        uni.showToast({
          title: this.$t("salesman.noName"),
          icon: "none"
        });
        return;
      }
      if (this.form.cat_id == "") {
        uni.showToast({
          title: this.$t("salesman.noClass"),
          icon: "none"
        });
        return;
      }
      if (this.form.mobile == "") {
        uni.showToast({
          title: this.$t("salesman.noPhone"),
          icon: "none"
        });
        return;
      }
      if (this.form.password == "") {
        uni.showToast({
          title: this.$t("shop.noPassword"),
          icon: "none"
        });
        return;
      }
      if (this.form.logo == "") {
        uni.showToast({
          title: this.$t("salesman.noLogo"),
          icon: "none"
        });
        return;
      }
      if (this.type == "") {
        uni.showToast({
          title: "请选择主体类型",
          icon: "none"
        });
        return;
      }
      if (!this.read) {
        uni.showToast({
          title: this.$t("salesman.noRead"),
          icon: "none"
        });
        return;
      }
      let merchant_info = {
        contact_info: this.$refs.write.contact_info,
        subject_info: this.$refs.write.subject_info,
        business_info: this.$refs.write.business_info,
        bank_account_info: this.$refs.write.bank_account_info
      };
      const res = await this.$allrequest.merchant.applyShop(
        { ...this.form, merchant_info: JSON.stringify(merchant_info) },
        true
      );
      if (res.code == 0) {
        uni.showToast({
          title: this.$t("mdAdmin.checkStatus2"),
          icon: "none",
          image: "",
          duration: 2000
        });
        setTimeout(() => {
          this.$utils.goBack(1);
        }, 2000);
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
      }
    },
    // 获取入驻门店协议和轮播图
    async getConfig() {
      const res = await this.$allrequest.merchant.applyGet();
      if (res.code == 0) {
        this.configData = res.data;
      }
    },
    gotoAgreement() {
      uni.setStorageSync("richText", this.configData.store_apply_agreement);
      this.$utils.toUrl("/md_admin/apply-md/richText");
    }
  }
};
</script>

<style lang="scss" scoped>
.applyShop {
  min-height: 100vh;
  background-color: #f2f2f2;
  font-family: PingFang SC;
  color: #262626;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
  .head {
    width: 100%;
    height: 360rpx;
    display: block;
  }
  .swiper {
    width: 100%;
    height: 320rpx;
    .pic {
      width: 100%;
      height: 100%;
    }
  }
  .formBox {
    padding-left: 30rpx;
    background-color: #fff;
    .formItem {
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      padding-right: 30rpx;
      justify-content: space-between;
      border-bottom: 1px solid #f1f1f1;
      .ttile {
        font-size: 30rpx;
      }
      input {
        text-align: right;
        color: #8c8c8c;
      }
      .chooseClass {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 24rpx;
        }
      }
    }
    .choosePic {
      padding: 30rpx 0;
      .title {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        color: #1d1d1d;
        text:nth-child(2) {
          color: #8c8c8c;
        }
      }
      .choose {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        background-color: #f6f6f6;
        margin-top: 30rpx;
        margin-right: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 60rpx;
        }
        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
        .close {
          position: absolute;
          width: 32rpx;
          height: 32rpx;
          right: -16rpx;
          top: -16rpx;
          background-color: #f0250e;
          color: #fff;
          font-size: 28rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .foot {
    margin-top: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .btn {
      width: 680rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background-color: #f0250e;
      font-size: 32rpx;
      color: #fff;
      font-weight: 500;
      border-radius: 999rpx;
    }
    .tip {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }
}
</style>
